<template>
  <view class="login">
    <view>
      <view class="name">
        <button @chooseavatar="onChooseAvatar" open-type="chooseAvatar">
          <image v-if="!userInfo.avatarUrl" style="border-radius: 50%;" src="../../static/avatar.png"></image>
          <image v-else style="border-radius: 50%;" :src="userInfo.avatarUrl"></image>

        </button>
        <input @blur="onNickName" placeholder="请选择昵称" v-model="userInfo.nickName" type="nickname"></input>
      </view>
      <button class="btn" @click="getUserInfo">保存</button>
      <view class="about">
        <text class="unlogin" @tap="toIndex">暂不登录 | </text>
        <text class="privacy" @tap="toPrivacy">隐私协议</text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  performOperation
} from '../../utils/cloudUtils.js'
export default {
  data () {
    return {
      userInfo: {
        nickName: '',
        avatarUrl: '',
        openId: '',
        exp: 10,
        score: 50,
        boundUserId: '',
        boundNickname: '',
        boundAvatar: ''
      },
    }
  },
  created () {
    uni.getStorage({
      key: 'openId',
      success: (res) => {
        this.userInfo.openId = res.data
      },
      fail: (err) => {
        console.log(err)
      }
    })
  },
  methods: {
    onNickName (e) {
      this.userInfo.nickName = e.detail.value;
    },
    onChooseAvatar (e) {
      this.userInfo.avatarUrl = e.detail.avatarUrl;
    },
    async getUserInfo () {
      uniCloud
        .callFunction({
          //调用云函数
          name: 'upload', //云函数名称
          data: this.userInfo.avatarUrl
        }).then((res) => {
          console.log("🚀 ~ file: login.vue:77 ~ getUserInfo ~ res:", res)
        })
      return
      if (!this.userInfo.nickName || !this.userInfo.avatarUrl) {
        uni.showModal({
          title: '温馨提示',
          content: '亲，需要填写用户信息才能正常使用小程序功能',
        })
      } else {
        const res = await performOperation("add", 'users', this.userInfo)
        this.setCookie()
      }
    },
    setCookie () {
      // 获取用户信息
      uni.setStorage({
        key: 'userList',
        data: this.userInfo,
        success: (res) => {
          console.log(res, 'res')
          var pages = getCurrentPages(); // 获取当前页面栈
          var prePage = pages[pages.length - 2]; // 上一个页面
          prePage.data.init = true // A 页面 init方法 为true
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
              success: function () {
                if (prePage.$vm.$refs.mine) {
                  prePage.$vm.$refs.mine.getOpenId(); // 执行前一个页面的刷新
                }
              }
            }); // 返回上一页
          }, 1000)
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    toPrivacy () {
      uni.navigateTo({
        url: '/pages/privacy/privacy',
      })
    },
    toIndex () {
      uni.removeStorage({
        key: 'userList',
        success () {
          console.log('删除成功');
          uni.reLaunch({
            url: '../index/index'
          });
        }
      });
      uni.reLaunch({
        url: '../index/index'
      })
    },
  },
}
</script>

<style scoped>
* {
  font-size: 0.875rem;
}

button {
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.login {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 44px);
}

image {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: cover;
}

.name {
  color: #000000;
  font-weight: 700;
  margin-top: 1.4275rem;
  margin-bottom: 3rem;
  font-size: 1.25rem;
}

.btn {
  margin-bottom: 20px;
  background: #50d0bc;
  border-radius: 46px;
  color: #fff;
  width: 10.5rem;
  margin: auto;
  height: 2.875rem;
  line-height: 2.875rem;
  text-align: center;
  border: 0 !important;
}

button::after {
  border: 0 !important;
}

.about {
  margin-top: 15px;
}

.unlogin {
  color: #8f8f94;
}

.privacy {
  margin-left: 5px;
  color: #50d0bc;
}
</style>